<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 图书检索 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-input placeholder="请输入书籍编号" style="width: 400px; padding: 20px" v-model="id"></el-input
                ><el-button @click="handleSearch">搜索</el-button>
            </div>
            <div class="book-box" v-if="this.book.id != ''">
                <div style="padding: 20px">
                    <el-avatar :size="80" icon="el-icon-user-solid" :src="book.coverUrl" shape="square"></el-avatar>
                </div>
                <div style="padding-left: 20px">
                    书籍编号：<span>{{ book.id }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">书名：{{ book.title }}</div>
                <div style="padding-left: 20px; padding-top: 10px">
                    作者：<span>{{ book.author.name }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    所属分类：<span>{{ book.type }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    出版社：<span>{{ book.publisher }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    出版时间：<span>{{ book.publishDate }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">简介：{{ book.description }}</div>
                <div style="padding-left: 20px; padding-top: 10px">
                    <el-button
                        type="primary"
                        icon="el-icon-discount"
                        @click="borrowBook"
                        v-if="book.isBorrow == 0"
                        >借阅书籍</el-button
                    >
                    <el-tag type="info" v-if="book.isBorrow == 1">书籍已被借阅</el-tag>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: '',
            book: {
                id: '',
                title: '',
                author: {
                    id: '',
                    name: ''
                },
                type: '',
                publisher: '',
                publishDate: '',
                isBorrow:'',
            }
        };
    },
    created() {},
    methods: {
        handleSearch() {
            if (this.id != '') {
                this.$http.get('/book/detail/' + this.id).then((res) => {
                    this.book = res.data.data;
                });
            }
        },
        borrowBook(){
            if(this.book.id!=''){
                this.$http.get('book/borrow/'+this.book.id).then(res => {
                    if(res.data.status==1){
                        this.$message.success('书籍借阅成功');
                        this.book.isBorrow = 1;
                    }else{
                        this.$message.success(res.data.message);
                    }
                });
            }
        }
    }
};
</script>
<style scoped>
.book-box {
    display: inline-block;
    margin: 20px;
    width: 400px;
    height: 400px;
    background-color: rgb(234, 241, 241);
    border-radius: 8px;
}
</style>